<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于我们</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-submenu.css">
<!--    <link rel="stylesheet" href="css/bootstrap.min.css">-->
<!--    <link rel="stylesheet" href="css/layui.css"  media="all">-->
<!--    <script src="js/jquery-3.2.1.js"></script>-->
<!--    <script src="js/bootstrap.min.js"></script>-->
<!--    <script src="js/jquery-3.3.0.js"></script>-->
<!--    <script src="js/layui.js"></script>-->
<!--    <script type="text/javascript" src="js/sweetalert.min.js"></script>-->
    <style>
        .nav-item  col-sm-3:hover{
            color:#00FFFF
        }
        .nav-link:hover{
            color:#00FFFF
        }
        .nav-item:active{color:#00FFFF}
    </style>
</head>
<body>

<!--导航栏  -->
<div class="container" id="frontTop"></div>
<div class="container">

    <br/><br/><br/>
    <!-- Nav pills -->
    <ul class="nav nav-pills col-sm-6" role="tablist" style="border:1px solid #007BFF;border-radius:10px;margin:auto">
        <li class="nav-item  col-sm-3">
            <a class="nav-link active" data-toggle="pill" href="#home">关于我们</a>
        </li><!--  style="color:white;" -->
        <li class="nav-item col-sm-3">
            <a class="nav-link" data-toggle="pill" href="#menu1">联系我们</a>
        </li>
        <li class="nav-item col-sm-3">
            <a class="nav-link" data-toggle="pill" href="#menu2">用户协议</a>
        </li>
        <li class="nav-item col-sm-3">
            <a class="nav-link" data-toggle="pill" href="#menu3">隐私政策</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home" class="container tab-pane active"><br><!--  style="color:white;" -->
            <h3 style="text-align:center;">我们在做什么？</h3>
            <h5 class="col-sm-8" style="margin:auto;text-indent:2em;line-height:200%;">“志愿推荐”是由河南大学高考大数据团队开发的高考志愿填报智能分析软件，曾为超过1000万考生提供志愿填报服务。</h5>
            <br/>
            <h5 class="col-sm-8" style="margin:auto;text-indent:2em;line-height:200%;">在高考志愿填报这场战役中，“志愿推荐”就是你的导航仪，在升学、择业、跳槽每个重要的十字路口，为你指引方向。</h5>
            <br/><br/><br/>
        </div>

        <div id="menu1" class="container tab-pane fade"><br>
            <h3 style="text-align:center;">联系我们</h3><!--  style="color:white;" -->
            <p></p>
            <div class="container col-sm-8">
                <form><!--  style="color:white;" -->
                    <div class="form-group">
                        <label for="name">姓名：</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="phone">电话：</label>
                        <input type="text" class="form-control" id="phone" placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱：</label>
                        <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label for="email">主题：</label>
                        <select class="form-control" id="sel1">
                            <option>问题反馈</option>
                            <option>商业合作</option>
                            <option>赞助我们</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="comment">内容：</label>
                        <textarea class="form-control" rows="5" id="comment"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
                <br/><br/>
            </div>
        </div>
        <div id="menu2" class="container tab-pane fade"  style="color:white;"><br>
            <h3>用户协议</h3>
            <p></p>
        </div>
        <div id="menu3" class="container tab-pane fade"  style="color:white;"><br>
            <h3>隐私政策</h3>
            <p></p>
        </div>
    </div>
</div>

<!--底部信息  -->
<div class="container" id="frontBottom"></div>
<!-- jq引用 -->
<script src="/js/jquery-3.3.0.js"></script>
<script src="/layui/layui.js"></script>
<!--bootstrap引用 -->
<script src="/bootstrap/bootstrap.min.js"></script>
<script src="/js/publicSection.js"></script>

</body>
</html>